import { useAtom } from "jotai";
import { Question } from "shared/icons";
import { Popover, RadioGroup, RadioItem } from "shared/components";
import currentTypeAtom from "@/store/currentType";

const types = [
  {
    desc: "自由",
    pop: (
      <div className="text-sm">
        說明：展示內容由AI生成，僅供參考，使用前請註意查證。使用提示詞為：
        <br />
        你作為一個圖書館員依據以下內容向讀者介紹這部古籍:
        <br />
        ----------------------
        <br />
        &lt;book_info&gt;
        <br />
        ----------------------
        <br />
        盡可能使用所有提供的信息。
        <br />
        詳細總結"作者、背景介紹、書目記載、版本情況、收藏單位"信息。
        <br />
        提供的文本中"書目記載"介紹了書籍被收錄進書目的信息，總結每一條書目信息。
        <br />
        按照"書名：... 作者： ... 背景介紹：... 書目記載：... 版本情況：...
        收藏單位：... "的格式輸出markdown格式
      </div>
    ),
  },
  {
    desc: "預設",
    pop: (
      <div className="text-sm">
        說明：展示內容由AI生成，僅供參考，使用前請註意查證。使用提示詞為：
        <br />
        根據以下圖書信息總結書籍的背景和內容介紹:
        <br />
        ----------------------
        <br />
        &lt;book_info&gt;
        <br />
        ----------------------
        <br />
        盡可能使用所有提供的信息。
      </div>
    ),
  },
  {
    desc: "引用",
    pop: (
      <div className="text-sm">
        說明：展示內容由AI生成，僅供參考，使用前請註意查證。使用提示詞為：
        <br />
        圖書信息如下，每個上下文都以一個參考數字開頭，比如[[citation:x]]，其中x是一個數字。請使用上下文，並在每句話的末尾引用上下文（如適用）。\
        <br />
        格式為[citation:x]。如果一個句子來自多個上下文，請列出所有適用的引文，如[citation:3][citation:5]。
        <br />
        ```
        <br />
        &lt;book_info&gt;
        <br />
        ```
        <br />
        請盡力使用所有提供的信息，並詳細總結以下內容：
        <br />
        - **作者**
        <br />
        - **背景介紹**
        <br />
        - **書目記載**
        <br />
        - 請逐條總結書籍被收錄進各書目的信息
        <br />
        - **版本情況**
        <br />
        - **收藏單位**
        <br />
        請按照如下格式輸出為Markdown格式：
        <br />
        ```
        <br />
        書名：...
        <br />
        作者： ...
        <br />
        背景介紹：...
        <br />
        書目記載：...
        <br />
        版本情況：...
        <br />
        收藏單位：...
        <br />
        ```
      </div>
    ),
  },
];

export default function TypeSelector() {
  const [currentType, setCurrentType] = useAtom(currentTypeAtom);

  return (
    <div className="flex items-center">
      <span>格式：</span>
      <RadioGroup value={currentType} onChange={setCurrentType}>
        {types.map((type, index) => (
          <div
            key={index}
            className="flex items-center [&:not(:first-child)]:ml-3"
          >
            <RadioItem value={index} className="text-xs">
              {type.desc}
            </RadioItem>
            <Popover
              trigger={
                <button className="ml-1 text-xs">
                  <Question />
                </button>
              }
            >
              {type.pop}
            </Popover>
          </div>
        ))}
      </RadioGroup>
    </div>
  );
}
